<!-- 我要打卡		punch -->
<template>
	<view class="pb40" v-if="data != ''">
	<!-- 	<view class="punch-top dis-flex pl15 pr15">
			<view class="wd60 f  c">
				<image style="width: 56rpx;height: 56rpx;border-radius: 200rpx;" :src="userInfo.img"  mode=""></image>
				<text class="fs24 ml10">{{userInfo.name}}</text>
			</view>	
			<view class="wd40 f flex-end c">
				<text class="fs20 mr10">课后打卡视频</text>
				<image style="width: 24rpx;height: 24rpx;" src="../../../static/img/038.png" mode=""></image>
			</view>
		</view> -->
		<view class="punch-daka dis-flex flex-align-center flex-center">
			<view v-if="data.is_daka == 0" @click="scvideo"  class="punch-daka-lan dis-flex flex-align-center flex-center">
					<view class="center" >
						<view class="fs32 white">上传视频</view>
						<view class="fs22 white">未打卡</view>
					</view>
			</view>
			<view v-else  class="punch-daka-lan2 dis-flex flex-align-center flex-center">
				<view class=" center">
					<view class="fs32 white">已提交视频</view>
					<view class="fs22 white">已打卡</view>
				</view>
			</view>
		</view>
		<view class="punch-buttom pb20" v-if="data.list != ''">
			<view class="w90" v-for="(item,index) in data.list" :key="index">
				<view class="mt20">
					<text class="bg-f5f pt5 pl15 pr15 pb3" style="border-radius: 200rpx;">{{item.date}}</text>
				</view>
				<view class="f  c mt20">
					<view class="vw15 f c">
						<text class="fs22 blue">{{item.time | guolv_time}}</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
					<view class="ml15" @click="videoShow(item.videourl)">
						<text class="fs24 hui">查看</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="videoPlay" @click="guanbi" class="pos-abs dis-flex flex-align-center" style="width: 100%; height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,.8);">
			<video class="wd100"   @click.stop=""
			   :src="videoUrl"
			   @fullscreenchange="screenChange"
			></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:this.$config.hosts+this.$config.UrlPostgetfile,
				data:[],
				videoSrc: '', // 视频资源路径
				video_tempFilePath: '', //上传视频的地址
				userInfo:[],
				videoPlay: false,
				videoUrl: ''
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '我要打卡'
			})
			this.userInfo = uni.getStorageSync('userInfo');
			this.init()
		},
		methods: {
			init() {
				var that = this
				that.$http.post(that.$config.UrlPostclockInfo, {}).then((res) => {
					if (res.status == 1) {
						that.data = res.data
					}
				})
			},
			
			// 触发全屏播放的点击事件
			videoShow(video_path) {
			  this.videoUrl = video_path;
			  this.videoPlay = true;  // 显示播放盒子
			},
			guanbi(){
				this.videoPlay = false;
			},
			//打开操作
			godaka(url){
				var that = this
				var json={
					videourl:url
				}
				that.$http.post(that.$config.UrlPostclock, json).then((res) => {
					uni.hideLoading();
					if(res.status == 1){
						 that.$api.toast('打卡成功')
						 that.init()
					}else{
						that.$api.toast('打卡失败')
					}
					
				})
			},
			scvideo(){
				var that = this;
				uni.chooseVideo({
					count: 1, //选择多少个视频
					sourceType: [ 'camera'], //视频来源相册和相机都可以
					maxDuration: 60, //相机拍摄最大时长为30S
					camera: 'front', //默认摄像头是后置摄像头
					success: res => {
						console.log('打印视频');
						console.log(res);
						console.log(res.tempFilePath);
						that.videoSrc=res.tempFilePath;
						that.video_tempFilePath = res.tempFilePath;
						uni.showLoading({
						    title: '加载中'
						});
						uni.uploadFile({
							 url:that.action,
							 filePath:res.tempFilePath,
							 name:'file',
							 formData:{
								 file:res.tempFilePath,
							 },
							 header:{"Content-Type":"multipart/form-data"},
							 success:res=>{
								let data = JSON.parse(res.data)
								console.log(data)
								that.godaka(data.data)
								
							 }
						})		
						
						
						
						if (res.duration > '60') {
							uni.showToast({
								title: '视频不得超过1分钟,请重新选择',
								icon: 'none',
								duration: 1500
							});
						} else if (res.size > '10485760') {
							uni.showToast({
								title: '视频时长不得超过10MB,请重新选择',
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail: res => {
						console.log(res)
						uni.showModal({
							content: '视频格式不正确，请重新选择',
							showCancel: false
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.col {
		color: #fff;
		background-color:#1F73F2;
	}
	.bol{
		background: #ececec;
	}
	.punch-top{
		width: 686rpx;
		height: 100rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka{
		width: 686rpx;
		height: 300rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka-s{
		width: 280rpx;
		height: 48rpx;
		line-height:48rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
	.punch-daka-lan{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
	}
	.punch-daka-lan2{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #999999;
		border-radius: 50%;
	}
	.punch-buttom{
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.12); 
		margin:0 auto;
		margin-top:24rpx;
		overflow:hidden;
	}
	
	.landian{
		width: 16rpx;
		height: 16rpx;
		opacity: 1;
		background: #ffffff;
		border: 1rpx solid #1f73f2;
		border-radius: 50%;
	}
	.punch-buttom-boxy{
		width: 400rpx;
		height: 82rpx;
		line-height:82rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding-left:24rpx;
	}
</style>
